<template>
  <div>
    <Table border stripe height="500" :columns="columns1" :data="currentData" :row-class-name="rowClassName"></Table>
  <Page show-elevator :total="dataCount" :pageSize="pageSize" :current="pageIndex" @on-change="changepage" @on-page-size-change="pagesize" style="text-align: right;"></Page>
  </div>
</template>
<script>
// import store from '../../store'
/*
let testData = {
  histories: [
    {
      name: '正常',
      sex: '女',
      nationality: '中国',
      id: '**************1111',
      validity: '2020-09-16',
      address: '杭州市 下城区 庆春路',
      job: '软件开发',
      contact: '187********',
      income: '5000',
      credit: '10000'
    }
  ]
}
*/
export default {
  data () {
    return {
      originPage: 1,
      dataCount: [], // 初始化信息总条数
      pageSize: 6, // 每页条数
      columns1: [
        {
          title: '姓名',
          key: 'userName',
          width: 70
        },
        {
          title: '性别',
          key: 'gender',
          width: 70
        },
        {
          title: '国籍',
          key: 'nation',
          width: 70
        },
        {
          title: '身份证号码',
          key: 'idNumber',
          width: 140
        },
        {
          title: '身份证有效期',
          key: 'expireDate',
          width: 115
        },
        {
          title: '居住地',
          key: 'detailaddress'
        },
        {
          title: '职业',
          key: 'job',
          width: 60
        },
        {
          title: '联系方式',
          key: 'mobilephone',
          width: 100
        },
        {
          title: '收入',
          key: 'income',
          width: 80
        },
        {
          title: '授信额度',
          key: 'creditLimit',
          width: 80
        }
      ],
      currentData: [], // table data
      params: {
        state: this.$route.meta.state,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      }
    }
  },
  mounted () {
    this.refresh(this.params)
  },
  methods: {
    /**
     * 刷新页面请求
    * */
    refresh () {
      this.getData(this.params)
    },
    /**
     * @params: state 用户状态
     * */
    getData (params) {
      params.pageSize = this.pageSize
      params.pageNum = this.originPage
      this.$api.getUserList(params).then((res) => {
        if (!res.error) {
          this.currentData = res.data.customerList // 获得表格数据
          this.dataCount = res.data.pageCounts // 获得总数据条数
          console.log(res.data.customerList)
        } else {
          console.log(this.$Message.error(res.msg))
        }
      })
    },
    rowClassName (row, index) {
      if (index % 2 === 0) {
        return 'ivu-table-stripe-even'
      } else {
        return 'ivu-table-stripe-odd'
      }
    },
    ok () {
      this.$Message.info('确定')
      this.currentData.push({
        notesid: this.value
      })
    },
    cancel () {
      this.$Message.info('取消')
    },
    // 获取历史记录信息
    /*
    handleListApproveHistory () {
      // 保存取到的所有数据
      this.ajaxHistoryData = testData.histories
      this.dataCount = testData.histories.length
      if (testData.histories.length < this.pageSize) {
        this.currentData = this.ajaxHistoryData
      } else {
        this.currentData = this.ajaxHistoryData.slice(0, this.pageSize)
      }
    },
    */
    changepage (index) {
      this.params.pageNum = index
      this.originPage = index
      this.$options.methods.getData(this.params)
      /*
      var _start = (index - 1) * this.pageSize
      var _end = index * this.pageSize
      this.currentData = this.ajaxHistoryData.slice(_start, _end)
      */
    }
  },
  created () {
    // this.handleListApproveHistory()
    this.getData(this.params)
  },
  watch: {
    '$route': function (to, from) {
      // 监听路由是否变化
      this.params.state = to.meta.state
      // console.log(this.params.state)
      this.refresh()
    }
  }
}
</script>
<style>
.ivu-table th{
  color: #ebf7ff;
  background-color: #353535;
  }
/*偶数行*/
.ivu-table-stripe-even td{
  background-color: #FFFFFF!important;
}
/*奇数行*/
.ivu-table-stripe-odd td{
  /*background-color: #ececec!important;*/
}
.ivu-tabs-tab:hover {
  color: #005fb7!important;
}
</style>
